<script>
import CeilingXq from "@/components/ceilingXq.vue";
import BottomPage from "@/components/bottomPage.vue";
import axios from "axios";

export default {
  name: "personalCenter",
  components: {BottomPage, CeilingXq},
  data(){
   return{
     visible: false,
     userInfo:{},
     xg:'',
     headers: {
       authorization: 'authorization-text',
     },
   }
  },
  methods:{
    chengename(){
      console.log(this.xg)
      axios.post('/api/pcUser/update/userInfo',{nickname:this.xg},{
        headers:{'content-type':'application/json'}
      }).then(res =>{
        console.log(res)
        // console.log(this.xg)
      })
    },

    showModal() {
      this.visible = true;
    },
    // handleOk(e) {
    //   console.log(e);
    //   this.visible = false;
    //   axios.post('/api/pcUser/update/userInfo',{
    //     nickname:this.xg
    //   }).then(res =>{
    //     console.log(res)
    //     // console.log(this.xg)
    //   })
    // },
    created() {
      axios.get('/api/pcUser/login-user/info').then(res => {
        console.log(res)
        if(res.data.code === 0) {
          this.userInfo = res.data;
        }
      })
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
}
</script>

<template>
<div>
<!--  顶部-->
  <ceiling-xq></ceiling-xq>
<!--  中间内容-->
  <div class="w">
    <div>
      <h2>个人信息</h2>
      <div class="box1">
       <div class="box2">
         <p>称昵</p>
         <div>
           <a-button type="primary" @click="showModal">
             修改
           </a-button>
           <a-modal v-model="visible" title="Basic Modal" @ok="handleOk" >
             <button @click="chengename">修改</button>
             <input type="text" v-model="xg">
           </a-modal>
         </div>
       </div>
        <p>昌</p>
      </div>
      <div class="box1">
        <p>手机号</p>
        <p>19511122096</p>
      </div>
      <div class="box1">
        <p>密码</p>
        <p>******</p>
      </div>
      <div class="box1">
        <a-avatar shape="square" :size="64" icon="user" />
        <img src="" alt="">
        <a-upload
            name="file"
            :multiple="true"
            action="/api/pcUser/updata/userAvatar"
            :headers="headers"
            @change="handleChange"
        >
          <a-button> <a-icon type="upload" />更改头像</a-button>
        </a-upload>
      </div>
    </div>
  </div>
<!--  底部-->
  <bottom-page></bottom-page>
</div>
</template>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.w {
  width: 1200px;
  margin: 0 auto;

}
.box1 {
  width: 1000px;
  border-bottom: 1px solid black;
  margin-top:30px ;
  font-size: 20px;
}
.box2 {
  display: flex;
}
</style>